<template>
	<div class="editor-container layout-pd">
		<el-card shadow="hover">
			<el-form ref="ruleFormRef" label-width="160px">
                <el-form-item label="标题:" prop="spuName">
                    <el-input class="width420" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="作者：" prop="title">
                    <el-input class="width420" placeholder="请输入商品标题" />
                </el-form-item>
                <el-form-item label="文章分类：" prop="subTitle">
                    <el-select class="width420"  placeholder="请选择商品品牌">
                        <el-option  label="item.bindName" value="item.brandId" key="item.brandId" />
                    </el-select>&emsp;
                </el-form-item>
                <el-form-item label="图文封面：">
                    <section>
                        <!-- <el-image v-if="goodsInfoData.imgUrl != ''" class="mr20"
                            style="width:64px; height: 64px;border-radius: 5px;" :src="goodsInfoData.imgUrl" fit="cover" /> -->
                        <section class="selector-img" @click="addImg('imgUrl', 0)">
                            <el-icon size="30" color="#999">
                                <Plus />
                            </el-icon>
                        </section>
                    </section>
                </el-form-item>
                <el-form-item label="文章简介:" prop="spuName">
                    <el-input type="textarea" class="width420"  placeholder="文章简介" />
                </el-form-item>
                <el-form-item label="文章内容" prop="subTitle">
                    <Editor v-model:get-html="state.editor.htmlVal" v-model:get-text="state.editor.textVal" :disable="state.editor.disable" />
                </el-form-item>
            </el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { defineAsyncComponent, reactive } from 'vue';

// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));

// 定义变量内容
const state = reactive({
	editor: {
		htmlVal:
			'<p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，</span><a href="https://baike.baidu.com/item/%E6%B0%91%E7%9B%9F/1971441?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">民盟</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">盟员</span><span style="color: rgb(51, 102, 204); background-color: rgb(255, 255, 255); font-size: 12px;"><sup> [1]</sup></span><a href="" target="" style="text-indent: 28px; text-align: start;"> </a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;"> ，毕业于</span><a href="https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7%E6%88%8F%E5%89%A7%E5%AD%A6%E9%99%A2/1736818?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">上海戏剧学院</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">表演系。</span></p>',
		textVal: '胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，民盟盟员 [1]  ，毕业于上海戏剧学院表演系。',
		disable: false,
	},
});
</script>
